<template>
<div>
    <div style="margin-bottom: 10px;">
        <span style="margin-right:5px;">设备</span>
        <ClientSelect v-model="client_data.client_id" style="width: 200px;margin-right:15px;"></ClientSelect>
        <span style="margin-right:5px;">名称搜索</span>
        <Input v-model="client_data.client_name" placeholder="设备名称" style="width: 200px;margin-right:15px;"></Input>
        <span style="margin-right:5px;">设备IP</span>
        <Input v-model="client_data.client_ip" placeholder="设备IP" style="width: 200px;margin-right:15px;"></Input>
        <span style="margin-right:5px;">设备类型</span>
        <Input v-model="client_data.client_type" placeholder="设备类型" style="width: 200px;margin-right:15px;"></Input>
        <span style="margin-right:5px;">最后在线时间</span>
        <Input v-model="client_data.client_alive_time" placeholder="最后在线时间" style="width: 200px;margin-right:15px;"></Input>
        <Button type="primary" @click="handleClientsSearch" style="margin-right: 15px;">搜索</Button>
        <Button @click="handleClearClientsSearch" style="margin-right: 15px;">重置</Button>
    </div>
    <div style="padding: 10px;border:1px solid #dcdee2;border-radius: 4px;border-bottom:0;">
        <CmdBatchAddButton :clients="selected_clients" style="margin-right: 15px;"></CmdBatchAddButton>
        <TaskBatchAddButton :clients="selected_clients" style="margin-right: 15px;"></TaskBatchAddButton>
        <AlarmPlanBatchAddButton :clients="selected_clients" style="margin-right: 15px;"></AlarmPlanBatchAddButton>
        <LANIPBatchAddButton :clients="selected_clients" style="margin-right: 15px;"></LANIPBatchAddButton>
        <span style="margin-right:5px;">自动刷新当前页面</span>
        <Switch v-model="client_data.auto_refresh" size="small"></Switch>
        <Button type="warning" size="small" @click="handleExportClients" style="margin-right: 15px;float:right;">导出</Button>
        <ClientBatchImportButton @success="handleGetClients" style="margin-right:15px;float:right;"></ClientBatchImportButton>
        <ClientAddButton @success="handleGetClients" style="margin-right:15px;float:right;"></ClientAddButton>
    </div>
    <Table ref="client_table" border :columns="client_data.columns" :data="client_data.data" @on-selection-change="handleSelectionChange"  stripe>
        <template #client_id="{ row }">
            <div v-if="row.client_name">
                <div>
                    {{ row.client_name }}
                    <Icon v-if="row.has_secret" style="margin-left: 5px;color:#19be6b;" title="已注册密钥" type="md-key" /></div>
                <div style="font-size: 10px;color:#aaa;">{{ row.client_id }}</div>
            </div>
            <div v-else>
                {{ row.client_id }}
                <Icon v-if="row.has_secret" style="margin-left: 5px;color:#19be6b;" title="已注册密钥" type="md-key" /></div>
        </template>
        <template #client_ip="{ row }">
            <div v-if="row.client_ip">{{ row.client_ip }}</div>
        </template>
        <template #client_info="{ row }">
            <div>
                <Tag v-if="row.client_type">{{ row.client_type }}</Tag>
                {{ row.client_info }}
            </div>
        </template>
        <template #params="{ row }">
            <div v-if="row.detection_values">
                <div v-if="row.detection_values.voltage != undefined">
                    <span style="color:#aaa">电压: </span>{{ row.detection_values.voltage }} V
                </div>
                <div v-if="row.detection_values.cell_rsrp != undefined">
                    <CellRSRPLabel :cell_rsrp="row.detection_values.cell_rsrp" :cell_gen="row.detection_values.cell_gen"></CellRSRPLabel>
                </div>
                <div v-if="row.detection_values.time_delay != undefined">
                    <TimeDelayLabel :time_delay="row.detection_values.time_delay"></TimeDelayLabel>
                </div>
            </div>
            <div v-else>-</div>
        </template>
        <template #client_check_time="{ row }">
            <ActiveDescTableCellValue :active_time="row.client_check_time" :now_time="row.now_time" :default_desc="检测未在线"></ActiveDescTableCellValue>
        </template>
        <template #client_alive_time="{ row }">
            <ActiveDescTableCellValue :active_time="row.client_alive_time" :now_time="row.now_time" :default_desc="未上线"></ActiveDescTableCellValue>
        </template>
        <template #action="{ row }">
            <CmdAddButton :client="row" style="margin-right: 5px;"></CmdAddButton>
            <ClientTaskAndAlarmPlanButton :client="row" style="margin-right: 25px;"></ClientTaskAndAlarmPlanButton>
            <ClientEditButton :data="row" @success="handleGetClients" style="margin-right: 5px;"></ClientEditButton>
            <ClientDeleteButton :data="row" @success="handleGetClients"></ClientDeleteButton>
        </template>
    </Table>
    <Page :total="client_data.page_total" size="small" show-elevator show-sizer show-total style="margin-top: 10px;" @on-change="handleClientPageChange" @on-page-size-change="handleClientPageSizeChange" />
</div>
</template>

<script>
import ClientAddButton from '@/views/ClientAddButton.vue';
import ClientEditButton from './ClientEditButton.vue';
import ClientDeleteButton from './ClientDeleteButton.vue';
import CmdAddButton from './CmdAddButton.vue';
import ClientTaskAndAlarmPlanButton from './ClientTaskAndAlarmPlanButton.vue';
import ClientBatchImportButton from './ClientBatchImportButton.vue';
import CmdBatchAddButton from './CmdBatchAddButton.vue';
import TaskBatchAddButton from './TaskBatchAddButton.vue';
import AlarmPlanBatchAddButton from './AlarmPlanBatchAddButton.vue';
import ClientSelect from './ClientSelect.vue';
import ActiveDescTableCellValue from './ActiveDescTableCellValue.vue';
import LANIPBatchAddButton from './LANIPBatchAddButton.vue';
import TimeDelayLabel from './TimeDelayLabel.vue';
import CellRSRPLabel from './CellRSRPLabel.vue';

export default {
    components: {
        ClientAddButton,
        ClientEditButton,
        ClientDeleteButton,
        CmdAddButton,
        ClientTaskAndAlarmPlanButton,
        ClientBatchImportButton,
        CmdBatchAddButton,
        TaskBatchAddButton,
        AlarmPlanBatchAddButton,
        ClientSelect,
        ActiveDescTableCellValue,
        LANIPBatchAddButton,
        TimeDelayLabel,
        CellRSRPLabel,
    },
    data() {
        return {
            client_data: {
                show: false,
                auto_refresh: false,
                client_id: '',
                client_name: '',
                client_ip: '',
                client_type: '',
                client_alive_time: '',
                columns: [
                    { type: 'selection', width: 40, align: 'center' },
                    { title: 'ID', key: 'id', width: 80, align: 'center' },
                    { title: '设备ID', slot: 'client_id', align: 'center', width: 200 },
                    { title: '设备IP', slot: 'client_ip', align: 'center', width: 150 },
                    { title: '设备信息', slot: 'client_info', align: 'center' },
                    // { title: '设备类型', key: 'client_type', align: 'center' },
                    { title: '运行参数', slot: 'params', align: 'center', width: 170 },
                    { title: '最后检测在线时间', slot: 'client_check_time', align: 'center', width: 150},
                    { title: '最后上线时间', slot: 'client_alive_time', align: 'center', width: 150 },
                    { title: '操作', slot: 'action', width: 150, align: 'center' }
                ],
                page_total: 40,
                page_size: 10,
                page_current: 1,
                data: []
            },
            selected_clients: []
        }
    },
    methods: {
        handleSelectionChange(selection) {
            this.selected_clients = selection;
        },
        handleClientPageChange(page_current) {
            this.client_data.page_current = page_current;
            this.handleGetClients();
        },
        handleClientsSearch() {
            this.client_data.page_current = 1;
            this.handleGetClients();
        },
        handleClearClientsSearch() {
            this.client_data.client_id = '';
            this.client_data.client_name = '';
            this.client_data.client_ip = '';
            this.client_data.client_type = '';
            this.client_data.client_alive_time = '';
            this.client_data.page_current = 1;
            this.handleGetClients();
        },
        handleClientPageSizeChange(page_size) {
            this.client_data.page_size = page_size;
            this.client_data.page_current = 1;
            this.handleGetClients();
        },
        handleGetClients() {
            var url = '/get_clients?page_size=' + this.client_data.page_size + '&page_current=' + this.client_data.page_current;
            if (this.client_data.client_id) {
                url += '&client_id=' + encodeURIComponent(this.client_data.client_id);
            }
            if (this.client_data.client_name) {
                url += '&client_name=' + encodeURIComponent(this.client_data.client_name);
            }
            if (this.client_data.client_ip) {
                url += '&client_ip=' + encodeURIComponent(this.client_data.client_ip);
            }
            if (this.client_data.client_type) {
                url += '&client_type=' + encodeURIComponent(this.client_data.client_type);
            }
            if (this.client_data.client_alive_time) {
                url += '&client_alive_time=' + encodeURIComponent(this.client_data.client_alive_time);
            }
            this.show = false
            this.$http.get(url).then(res => {
                this.client_data.page_total = res.page_total;
                let data = res.data;
                data.forEach((item) => {
                    item.now_time = this.$Date().format('YYYY-MM-DD HH:mm:ss');
                })
                this.client_data.data = data;
                this.show = true
                this.handleGetDetectionValues();
            });
        },
        handleGetDetectionValues() {
            var url = '/get_detection_values_by_client_ids';
            var client_ids = [];
            var types = ['cell_gen', 'cell_rsrp', 'time_delay']
            this.client_data.data.forEach((item) => {
                client_ids.push(item.client_id);
            })
            this.$http.post(url, {client_ids: client_ids, types: types}).then(res => {
                if (res.status == 'ok') {
                    let data = res.data;
                    data.forEach((item) => {
                        this.client_data.data.forEach((client) => {
                            if (client.client_id == item.client_id) {
                                if(!client.detection_values) {
                                    client.detection_values = {};
                                }
                                client.detection_values[item.type] = item.value;
                            }
                        })
                    })
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleExportClients() {
            var url = '/export_clients?page_size=' + this.client_data.page_size + '&page_current=' + this.client_data.page_current;
            if (this.client_data.client_id) {
                url += '&client_id=' + encodeURIComponent(this.client_data.client_id);
            }
            if (this.client_data.client_name) {
                url += '&client_name=' + encodeURIComponent(this.client_data.client_name);
            }
            if (this.client_data.client_ip) {
                url += '&client_ip=' + encodeURIComponent(this.client_data.client_ip);
            }
            if (this.client_data.client_type) {
                url += '&client_type=' + encodeURIComponent(this.client_data.client_type);
            }
            if (this.client_data.client_alive_time) {
                url += '&client_alive_time=' + encodeURIComponent(this.client_data.client_alive_time);
            }
            this.$http.get(url).then(res => {
                if (res.status == 'ok') {
                    this.$http.downloadFile(res.data);
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
    },
    created() {
        this.handleGetClients();

        this.$Notice.config({
                top: 350,
                duration: 10
            });
        
        let temp = setInterval(() => {
            let token = localStorage.getItem('token');
            if (token == null) {
                clearInterval(temp);
                return;
            }
            if ( this.client_data.auto_refresh) {
                this.handleGetClients();
            }
        }, 10000); // 每10秒获取一次新告警记录
    }
}
</script>